<template>
  <div>
    <el-card>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="16">菜单列表</el-col>
        <el-col :span="8" style="display:flex;justify-content: flex-end;">
          <el-button type="text" size="small" @click="addData(0,1)">新建</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-table 
       class="expandTable"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="_id"
        :default-sort="{ prop: 'sortNo', order: 'ascending' }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @selection-change="handleSelectionChange"
        v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="menuName" label="菜单名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="menuType" label="菜单类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.menuType == 0">一级菜单</span>
            <span v-if="scope.row.menuType == 1">子菜单</span>
            <span v-if="scope.row.menuType == 2">按钮权限</span>
          </template>
        </el-table-column>
        <el-table-column prop="linkType" label="链接类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.linkType == 0">vue</span>
            <span v-if="scope.row.linkType == 1">外链</span>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="icon" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="component" label="组件" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="path" label="路径" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sortNo" label="排序" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-breadcrumb separator="|">
            <el-breadcrumb-item v-has-permi="['portal:notice:view']">
                <span @click="checkDate(1,scope.row)">
                <el-link type="primary" class="el-icon-view" title="预览"></el-link>
                 </span>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-has-permi="['portal:notice:edit']">
                <span @click="checkDate(2,scope.row)">
                <el-link type="primary" class="el-icon-edit" title="编辑"></el-link>
                 </span>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-has-permi="['portal:notice:edit']">
                <span @click="addData(0,2,scope.row)">
                <el-link type="primary" class="el-icon-plus" title="添加"></el-link>
                 </span>
              </el-breadcrumb-item>
              <el-breadcrumb-item class="last-breadcrumb" v-has-permi="['portal:notice:delete']">
                <span @click="removeData(scope.row)">
                <el-link type="primary" class="el-icon-delete" title="删除"></el-link>
                 </span>
              </el-breadcrumb-item>
              <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isVisible"
      width="70%"
      @close="closeD">
      <el-form :model="form" ref="form" :rules="rules" label-width="140px" :inline="false" size="normal">
        <el-row :gutter="20">
          <el-col :span="14" :offset="0">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" :disabled="isEdit == 1"></el-input>
            </el-form-item>
             <el-form-item v-if="menuType == 2" label="上级菜单" prop="filterText">
              <el-popover ref="treePop" placement="bottom-start" width="400" trigger="click">
                <div>
                  <el-tree
                    class="filter-tree"
                    :data="tableData"
                    accordion
                    :props="defaultProps"
                    @node-click="getNode"
                    ref="tree"
                  >
                  </el-tree>
                </div>
                <el-input
                  size="medium"
                  slot="reference"
                  class="input-with-select"
                  clearable
                  v-model="form.filterText"
                  :disabled="isEdit == 1"
                ></el-input>
              </el-popover>
            </el-form-item>
              <el-form-item label="链接类型" prop="linkType">
                <el-select v-model="form.linkType" value-key="" :disabled="isEdit == 1" placeholder="链接类型" filterable>
                  <el-option label="vue" :value="0">
                  </el-option>
                  <el-option label="外链" :value="1">
                  </el-option>
                </el-select>
              </el-form-item>
            <div v-if="form.linkType == 0">
              <el-form-item label="菜单类型" prop="menuType" v-if="menuType == 2">
              <el-select v-model="form.menuType" placeholder="" :disabled="isEdit == 1" clearable style="width:100%;">
                <el-option label="子菜单" :value="1"></el-option>
                <el-option label="按钮权限" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单路径" prop="path">
              <el-input v-model="form.path" clearable :disabled="isEdit == 1"></el-input>
            </el-form-item>
            <el-form-item label="前端组件" prop="component" v-if="form.menuType!=2">
              <el-input v-model="form.component" clearable :disabled="isEdit == 1"></el-input>
            </el-form-item>
            <el-form-item label="组件名称" prop="name" v-if="form.menuType!=2">
              <el-input v-model="form.name" clearable :disabled="isEdit == 1"></el-input>
            </el-form-item>
            </div>
            <div v-if="form.linkType == 1">
              <el-form-item label="外链地址" prop="link">
                <el-input v-model="form.link" clearable :disabled="isEdit == 1"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="菜单图标" prop="icon" v-if="form.menuType!=2">
            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              @show="$refs['iconSelect'].reset()"
            >
              <IconSelect ref="iconSelect" @selected="selected"/>
              <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly :disabled="isEdit == 1">
                <!-- <svg-icon
                  v-if="form.icon"
                  slot="prefix"
                  :icon-class="form.icon"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"
                /> -->
                <i :class="form.icon" v-if="form.icon" slot="prefix" style="font-size: 30px;"/>
                <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
              </el-input>
            </el-popover>
            <!-- <icon-picker v-model="ruleForm.icon"></icon-picker> -->
            </el-form-item>
            <el-form-item label="排序" prop="sortNo">
              <el-input-number v-model="form.sortNo" clearable controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="0">
            <el-form-item label="是否路由菜单" prop="isRoute">
            <el-select v-model="form.isRoute" placeholder="" clearable style="width:100%;"
                       :disabled="isEdit == 1">
                <el-option label="否" :value="form.isRoute===0?0:'0'"></el-option>
                <el-option label="是" :value="form.isRoute===1?1:'1'"></el-option>
              </el-select>
              <!-- <el-switch v-model="ruleForm.isRoute"></el-switch> -->
            </el-form-item>
            <el-form-item label="隐藏路由" prop="hidden">
              <el-select v-model="form.hidden" placeholder="" clearable style="width:100%;"
                        :disabled="isEdit == 1">
                <el-option label="否" :value="form.hidden===0?0:'0'"></el-option>
                <el-option label="是" :value="form.hidden===1?1:'1'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否缓存路由" prop="keepAlive">
              <el-select v-model="form.keepAlive" placeholder="" clearable style="width:100%;"
                        :disabled="isEdit == 1">
                <el-option label="否" :value="form.keepAlive===0?0:'0'"></el-option>
                <el-option label="是" :value="form.keepAlive===1?1:'1'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="聚合路由" prop="alwaysShow">
              <el-select v-model="form.alwaysShow" placeholder="" clearable style="width:100%;"
                        :disabled="isEdit == 1">
                <el-option label="否" :value="form.alwaysShow===0?0:'0'"></el-option>
                <el-option label="是" :value="form.alwaysShow===1?1:'1'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="isEdit != 1">
          <el-button type="primary" @click="onSubmit('form')">保存</el-button>
          <el-button @click="isVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {list , create , update , remove} from '@/api/menu.js'
import IconSelect from '@/components/IconSelect'
export default {
  components:{IconSelect},
  data() {
    return {
      loading:false,
      tableData:[],
      isVisible:false,
      isEdit:0,
      menuType:1,
      dialogTitle:'新增一级菜单',
      defaultProps: {
        children: 'children',
        label: 'menuName',
      },
      form:{
        icon:'',
        filterText:'',
        isRoute:0,
        hidden:0,
        keepAlive:0,
        alwaysShow:0
      },
      rules:{
        menuName: [{required: true, message: '请填写菜单名称', trigger: 'blur'}],
        path: [{required: false, message: '请填写菜单路径', trigger: 'blur'}],
        component: [{required: true, message: '请填写前端组件', trigger: 'blur'}],
        name: [{required: true, message: '请填写组件名称', trigger: 'blur'}],
        filterText: [{required: true, message: '请选择上级菜单', trigger: 'blur'}],
        perms: [{required: true, message: '请选择是否有子菜单', trigger: 'change'}],
        linkType: [{required: true, message: '请选择链接类型', trigger: 'change'}],
        menuType: [{required: true, message: '请选择菜单类型', trigger: 'change'}],
        sortNo: [{required: true, message: '请填写排序', trigger: 'blur'}],
        link:[{required: true, message: '请填写外链地址', trigger: 'blur'}],
      }
    }
  },
  mounted(){
    this.getList()
  },
  computed:{
  },
  methods:{
    // 列表
    getList(){
      this.loading = true
      const that = this
      list().then(function(res){
        console.log(res)
        that.loading = false
        if(res.success){
          // that.tableData = res.data
          that.tableData = that.handleTree(res.data,'_id')
          console.log('tableData', that.tableData)
        }
      }).catch((error)=>{
        console.log(error)
        that.loading = false
      })
    },
    // 添加
    addData(type,menuType,row){
      this.isEdit = type
      this.menuType = menuType
      if(menuType == 1){
        this.dialogTitle = '新增一级菜单'
      }else if(menuType == 2){
        this.dialogTitle = '添加子菜单/按钮权限'
        this.form.filterText = row.menuName
        this.form.parentId = row._id
      }
      this.isVisible = true
    },
    // 编辑or查看
    checkDate(type,row){
      this.isEdit = type
      this.isVisible = true
      if(this.isEdit == 1){
        if (row.menuType == 0) {
          this.menuType = 1;
          this.dialogTitle = '查看一级菜单';
        }else if (row.menuType == 1) {
          this.menuType =2;
          this.dialogTitle = '查看子级菜单';
        }else if (row.menuType == 2) {
          this.menuType =2;
          this.dialogTitle = '查看按钮权限';
        }
      }else if(this.isEdit == 2){
        if (row.menuType == 0) {
          this.menuType = 1;
          this.dialogTitle = '编辑一级菜单';
        }else if (row.menuType == 1) {
          this.menuType =2;
          this.dialogTitle = '编辑子级菜单';
        }else if (row.menuType == 2) {
          this.menuType =2;
          this.dialogTitle = '编辑按钮权限';
        }
      }
      this.form = JSON.parse(JSON.stringify(row))
      if(this.form.linkType == 1){
        this.form.link = this.form.path;
      }
      this.form.filterText = row.menuName
      this.form.parentId = row._id
    },
    // 确定提交
    onSubmit(formName){
      const that = this
      this.$refs[formName].validate(valid => {
      if (valid) {
        // menuType 0一级 1子菜单 2按钮权限
        if (this.menuType == 1) {
          this.form.menuType = 0
          this.form.parentId = ''
        }
        const data=Object.assign(this.form)
        if(this.form.linkType == 1){
          this.form.path =  this.form.link;
        }
        const username =  JSON.parse(localStorage.getItem('userInfo')).username
        if(this.isEdit == 0){
          data.create_by = username
          create(data).then(function(res){
            console.log(res)
            if(res.success){
              that.$message.success('新增成功')
              that.isVisible = false
              that.getList()
            }else{
              that.$message.error(res.message)
            }
          })
        }else if(this.isEdit == 2){
          data.update_by = username
          update(data).then(function(res){
            console.log(res)
            if(res.success){
              that.$message.success('修改成功')
              that.isVisible = false
              that.getList()
            }else{
              that.$message.error(res.message)
            }
          })
        }
      }else {
        console.log('error')
      }
      })
    },
    // 删除提交
    removeData(row){
      let data={
        _id:row._id
      }
      console.log('data',data)
      const that = this
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      .then(() => {
        that.loading = true
        remove(data).then(function(res){
          that.loading = false
          console.log(res)
          if(res.success){
            that.$message.success('删除成功')
            that.getList()
          }else{
            that.$message.error(res.message)
          }
        }).catch(() => {
          that.loading = false
        });
      }).catch(() => {
        });
    },
    // 关闭弹窗
    closeD(){
      this.form = {}
    },
    // 选择图标
    selected(name) {
      this.$nextTick(()=>{
      this.form.icon = name;
      console.log(this.form.icon)
      })
    },
    // 选择上级节点
    getNode(e) {
      this.form.filterText = e.menuName
      this.form.parentId = e._id
      this.$refs.treePop.doClose()
      console.log(123, e)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    },
    handleSelectionChange(val){
      console.log(val)
    }
  },
}
</script>
<style scoped>

</style>
